<template>
  <div style="background:#808080;z-index:500;position: fixed;top:0;bottom:0">
    <img style="width:100%" :src="fmtImg" alt />
    <div class="ewm">
      <img :src="ewmImg" style="width:150px;height:150px;" />
    </div>
    <div class="getflnum">
      <div>我的邀请码:{{code}}</div>
      <div>
        再邀请
        <span style="color:red">{{num}}</span>个用户即可领取福利
      </div>
    </div>

    <div class="getfl" @click="getflBtn">{{btnStr}}</div>
    <div class="gettx" @click="receivefl">{{receiveflbtn}}</div>
    <div class="zhezhao" v-show="showGet" @touchmove.prevent>
      <div class="fltitle">填写邀请码领取福利</div>
      <div class="fltijiao">
        <i-input v-model="submcode" :value.sync="submcode" placeholder="请输入邀请码" style="width: 50%"></i-input>
      </div>
      <div class="fltijiao">
        <i-button type="success" style="width: 24%;margin-top:20px" @click="SubmitCode">确定</i-button>
        <i-button style="width: 24%;margin-top:20px" @click="cancel">取消</i-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      receiveflbtn: "填写邀请码",
      btnStr: "领取福利",
      str: "",
      showGet: false,
      ewmImg: "",
      code: "1122",
      submcode: "",
      fmtImg:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b5009_10000&sec=1587791132431&di=869cf7d80be4028d7b339a6cb8d1e30b&imgtype=0&src=http://bpic.588ku.com/element_origin_min_pic/16/07/19/14578dc76e3ff73.jpg",
      num: 13,
      userInfo: null
    };
  },
  created() {
    this.init();
    this.getEwm();
    this.getflBtn();
  },
  methods: {
    //
    init() {
      var _this = this;
      const url = "http://www.shizilaoba.com/lion/invite/query"; //调用自定义的接口
      var storage = window.localStorage;
      var json = storage.getItem("userInfo");
      var jsonObj = JSON.parse(json);
      _this.userInfo = jsonObj;
      const data = Object.assign(
        {},
        {
          openid: _this.userInfo.openid
        }
      );
      axios.post(url, data).then(res => {
        if (res.data.data.is_auth == true) {
          //可填写邀请码
          _this.receiveflbtn = "填写邀请码";
        } else {
          _this.receiveflbtn = "已填写";
        }
      });
    },
    lingqu() {
      var _this = this;
      _this.$Message.success("已提交申请,请等待管理员审核");
    },
    SubmitCode() {
      //TODO提交邀请码 lion.jnaw.top/lion/wechat/add
      var _this = this;
      if (_this.receiveflbtn == "已填写") {
        return;
      }
      console.log(_this.submcode);
      const url = "http://www.shizilaoba.com/lion/invite/add"; //调用自定义的接口
      const data = Object.assign(
        {},
        {
          openid: _this.userInfo.openid,
          code: _this.submcode
        }
      );
      axios.post(url, data).then(res => {
        //debugger;
        if (res.data.result == 0) {
          _this.$Message.success("填写成功");
        } else {
          _this.$Message.error("邀请码错误");
        }
      });

      _this.cancel();
    },
    cancel() {
      var _this = this;
      _this.showGet = false;
    },
    receivefl() {
      //TODO 判断是否填写过邀请码
      var _this = this;
      if (_this.receiveflbtn == "已填写") {
        return;
      }
      _this.showGet = true;
    },
    getflBtn() {
      var _this = this;
      const url = "http://www.shizilaoba.com/lion/invite/getNum"; //调用自定义的接口
      const data = Object.assign(
        {},
        {
          openid: _this.userInfo.openid
        }
      );
      axios.post(url, data).then(res => {
        _this.num = res.data.data.num;
        if (_this.num == 0) {
          _this.btnStr = "已领取福利,审核中~";
          _this.$Message.success("已领取福利");
        } else {
          _this.btnStr = "领取福利";
          _this.$Message.error("邀请人数不足");
        }
      });
    },
    getCode() {},
    // getNum() {
    //   var _this = this;
    //   const url = "http://www.shizilaoba.com/lion/wechat/getNum"; //调用自定义的接口
    //   const data = Object.assign(
    //     {},
    //     {
    //       openid: "oK1sawS-VuT1_2LJ4l0DMjKu9KEc"
    //     }
    //   );
    //   axios.post(url, data).then(res => {
    //     _this.num = res.data.data.num;
    //     if (_this.num == 0) {
    //       _this.btnStr = "已领取福利,审核中~";
    //     }
    //   });
    // },
    getEwm() {
      var _this = this;
      const url = "http://www.shizilaoba.com/lion/wechat/getQrTicket"; //调用自定义的接口
      const data = Object.assign(
        {},
        {
          openid: _this.userInfo.openid
        }
      );
      axios.post(url, data).then(res => {
        _this.code = res.data.data.code;
        _this.ewmImg = res.data.data.url;
      });
    },
    getWelfare() {
      var _this = this;
      _this.str = "已领取请等待管理员审核";
      _this.str = "再邀请" + _this.num + "个用户就能领取了";
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

.zhezhao {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
}

.zhezhao .fltitle {
  top: 20%;
  text-align: center;
  color: #fff;
  position: relative;
}

.zhezhao .fltijiao {
  position: relative;
  top: 40%;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.getflnum {
  width: 100%;
  height: 80px;
  line-height: 40px;
  position: fixed;
  bottom: 50px;
  left: 5%;
  z-index: 500;
}

.ewm {
  width: 80%;
  height: 150px;
  left: 10%;
  right: 10%;
  position: fixed;
  bottom: 20%;
  text-align: center;
  z-index: 500;
}

.getfl {
  width: 50%;
  height: 44px;
  text-align: center;
  background: $color-background;
  color: $color-theme;
  line-height: 44px;
  position: fixed;
  bottom: 0px;
  z-index: 500;
}

.gettx {
  width: 50%;
  height: 44px;
  text-align: center;
  background: #333333;
  color: $color-theme;
  line-height: 44px;
  position: fixed;
  bottom: 0px;
  left: 50%;
  z-index: 500;
}
</style>